<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />        
        <title>$.fn.toggle</title>
        <script>
            window.$$path = location.protocol + "//" + location.host;
            document.write('<script src="' + $$path + '/mass_merge.js"><\/script>')
            document.write('<script src="' + $$path + '/doc/scripts/common.js"><\/script>')
        </script>
        <style type="text/css">

            #sample div { background:#a9ea00; margin:3px; width:80px; 
                          height:40px; float:left}
            </style>

        </head>
        <body>
            <article>
                <h3>$.fn.toggle(duration, props)</h3>
                <p><span class="stress">描述：</span></p>
            <p>这是一个很特别的函数，如果没有参数，那么它就直接隐藏或显示（视原来的显示状态而定）。如果它第一个与第二个参数都是函数，那么就视为一
                种特殊的绑定点击事件的方法，第一点击执行第一个回调，第二次执行第二个回调，如果存在第三个函数参数，那么就是执行它，否则重新开始执行第一个回调。
                如果第一个参数是number，那么就当作动画的时长。如果只有一个参数且为函数，则作为动画完成时的回调函数，时长默认为500ms。
            </p>
            <p><span class="stress">参数：</span></p>
            <dl>
                <dt>duration</dt>
                <dd>可选。Number。动画执行时间，单位为ms，默认为500ms。</dd>
                <dd>可选。Function。动画结束时的回调函数</dd>
                <dt>props</dt>
                <dd>可选。Object。各种配置。</dd>
            </dl>
            <p><span class="stress">返回值：</span></p>
            <p>mass实例</p>
            <p>props配置对象可以指定各种CSS属性，如width, height, color, fontSize, opacity等进行动画变化，
                还支持scrollTop与scrollLeft这两个属性进行动画变化。还可以指定动画开始前的回调函数before,动画结束时的回调函数after,
                动画是否进行倒退reverse....
            </p>
            <fieldset ><legend>例子</legend>
                <pre class="brush:javascript;gutter:false;toolbar:false">
                $.require("ready,fx,event",function(){
                    $("#sample").click(function(){
                       $("#sample div").toggle(1500);
                    })
                });
                </pre>
                 <button class="doc_btn" type="button">点我，执行代码</button>
                <div id="sample">
                    Click me!
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>

            </fieldset>

        </article>
    </body>
</html>